<h3 mat-dialog-title>
  用户（{{user && user.id ? '修改' : '新增'}}）
</h3>

<mat-dialog-content>
  <form [formGroup]="form" novalidate>

    <mat-form-field class="full-width">
      <input matInput placeholder="登录名" formControlName="username">
      <mat-error *ngIf="form.controls['username'].hasError('required')">
        登录名不能为<strong>空</strong>
      </mat-error>
      <mat-error *ngIf="form.controls['username'].hasError('minlength')">
        登录名至少<strong>3</strong>个字符
      </mat-error>
    </mat-form-field>

    <mat-form-field class="full-width" *ngIf="!user.id">
      <mat-label>密码</mat-label>
      <input matInput [type]="hidePassword ? 'password' : 'text'" formControlName="password" autocomplete="off">
      <button mat-icon-button matSuffix (click)="hidePassword = !hidePassword">
        <mat-icon>{{hidePassword ? 'visibility_off' : 'visibility'}}</mat-icon>
      </button>
      <mat-error *ngIf="form.controls['password'].hasError('required')">
        密码不能为 <strong>空</strong>
      </mat-error>
      <mat-error *ngIf="form.controls['password'].hasError('minlength')">
        密码长度至少<strong>4</strong>个字符
      </mat-error>

    </mat-form-field>

    <mat-form-field class="full-width">
      <input matInput placeholder="角色" formControlName="role">
    </mat-form-field>

    <mat-form-field class="full-width">
      <input matInput placeholder="邮箱" formControlName="email">
    </mat-form-field>

  </form>
</mat-dialog-content>

<div mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>取消</button>
  <button mat-button color="primary" cdkFocusInitial (click)="save()">保存</button>
</div>
